import React, { Component } from 'react';
import './common.scss';
import $ from 'jquery';
let ziliao = {
  color: '#919090',
  lineHeight: 1.6
};
let ziliao1 = {
  color: '#919090',
  lineHeight: 1.6,
  fontSize:'12px'
};

class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }
  goDetail (id) {
    console.log(this.props);
    this.props.history.push('/shiwendetail/' + id)
  }
  
  getShowyi (event) {
    console.log(event.currentTarget)
    var currentNode = event.currentTarget;
    var currentYi =$(currentNode).parent().parent().siblings('.content').children().children('.yi');
    var currentZiliaowrap = $(currentNode).parent().parent().siblings('.content').children('.ziliaowrap');
    if(currentYi.css('display') === 'none'){
      currentYi.css('display','block');
      currentNode.style.color = '#fff';
      currentNode.style.backgroundColor = '#9A9A9A';
      currentZiliaowrap.css('display','block');
    }else{
      currentYi.css('display','none');
      currentNode.style.color = '#A0A09F';
      currentNode.style.backgroundColor = '';
      currentZiliaowrap.css('display','none');
    }
    
  }
  getShowzhu (event) {
    console.log(event.currentTarget)
    var currentNode = event.currentTarget;
    var currentShang =$(currentNode).parent().parent().siblings('.content').children().children('.shang');
    if(currentShang.css('display') === 'none'){
      currentShang.css('display','block');
      currentNode.style.color = '#fff';
      currentNode.style.backgroundColor = '#9A9A9A';
    }else{
      currentShang.css('display','none');
      currentNode.style.color = '#A0A09F';
      currentNode.style.backgroundColor = '';
    }
    
  }
  getShowshang (event) {
    console.log(event.currentTarget)
    var currentNode = event.currentTarget;
    currentNode.style.color = '#fff';
    currentNode.style.backgroundColor = '#9A9A9A';
    var currentAppreciation = $(currentNode).parent().parent().siblings('.content').children('.appreciation');
    if(currentAppreciation.css('display') === 'none'){
      currentAppreciation.css('display','block');
      currentNode.style.color = '#fff';
      currentNode.style.backgroundColor = '#9A9A9A';
    }else{
      currentAppreciation.css('display','none');
      currentNode.style.color = '#A0A09F';
      currentNode.style.backgroundColor = '';
    }
  }
  shiwenCollection (event) {
    console.log(event.currentTarget)
    var currentCollection = event.currentTarget;
    if($(currentCollection).children().attr('class') === 'iconfont icon-shoucang'){
      $(currentCollection).children().attr('class','iconfont icon-daohangshoucangyishoucang')
    }else{
      $(currentCollection).children().attr('class','iconfont icon-shoucang')
    }
  }
  shiwenCtrlc () {
    alert('已复制到剪切板');
  }
  shiwenhover (event) {
    console.log(event.currentTarget)
    console.log($(event.currentTarget).parent().parent().parent().parent().children('.tools'))
    $(event.currentTarget).parent().parent().siblings('.shiwenerwima').css('display','block');
    $(event.currentTarget).attr('class','iconfont icon-xiaoxi_')
    
  }
  shiwenleave (event) {
    console.log(event.currentTarget)
    console.log($(event.currentTarget).parent().siblings('.shiwenerwima'))
    $(event.currentTarget).parent().siblings('.shiwenerwima').css('display','none');
    $(event.currentTarget).children().attr('class','iconfont icon-xiaoxi')
  }
  shiwenAudio (event) {
    var currentAudio = $(event.currentTarget).parent().siblings('.shiwenAudio');
    if(currentAudio.css('display') === 'none') {
      $(event.currentTarget).parent().siblings('.shiwenAudio').css('display','block');
      $(event.currentTarget).children().attr('class','iconfont icon-shengyinyinliangmianxing')
    } else {
      $(event.currentTarget).parent().siblings('.shiwenAudio').css('display','none');
      $(event.currentTarget).children().attr('class','iconfont icon-shengyinyinliangxianxing')
    }
    
  }

  render () {
    const {title, dynasty, name, appreciation, id} = this.props.data;
    return (
      <div className="gloabalContent">
        <div className="con">
          <div className="zhushi">
            <ul className="yi_list">
              <li onClick={this.getShowyi.bind(this)}>译</li>
              <li onClick={this.getShowzhu.bind(this)}>注</li>
              <li onClick={this.getShowshang.bind(this)}>赏</li>
              <li>背</li>
            </ul>
          </div>
          <p className="title" onClick={ this.goDetail.bind(this, id) }>
            <b>{title}</b>
          </p>
          <p className="autor">
            <span>{dynasty}</span>
            ：
            <span>{name}</span>
          </p>
          <div className="content">
            <p>
              君不见，黄河之水天上来，奔流到海不复回。
              <br />
              <span className="yi">
                你难道看不见那黄河之水从天上奔腾而来，波涛翻滚直奔东海，从不再往回流。
                <br />
              </span>
              <span className="shang">
                将进酒：属乐府旧题。将（qiāng）：请。君不见：乐府中常用的一种夸语。天上来：黄河发源于青海，因那里地势极高，故称.
                <br />
              </span>
            </p>
            <p>
              君不见，高堂明镜悲白发，朝如青丝暮成雪。
              <br />
              <span className="yi">
                你难道看不见那黄河之水从天上奔腾而来，波涛翻滚直奔东海，从不再往回流。
                <br />
              </span>
              <span className="shang">
                高堂：高大的厅堂。一说指父母。青丝：黑发。此句意为在高堂上的明镜中看到了自己的白发而悲伤。
                <br />
              </span>
            </p>
            <p className="appreciation">{appreciation}</p>
            <div className="ziliaowrap">
              <p style={ziliao}>参考资料</p>
                {
                  this.props.data.notes.map((itm, idx) => {
                    return (
                      <div key={idx} style={ziliao1}>
                        {itm}
                      </div>
                    )
                  })
                }
            </div>
          </div>
        </div>
        <div className="tools">
          <ul className="tool_img">
            <li onClick={this.shiwenCollection.bind(this)}><i className="iconfont icon-shoucang"></i></li>
            <li onClick={this.shiwenCtrlc}><i className="iconfont icon-copy"></i></li>
            <li className="shiwenxiaoxi" onMouseLeave={this.shiwenleave.bind(this)}><i className="iconfont icon-xiaoxi" onMouseEnter ={this.shiwenhover.bind(this)}></i></li>
            <li onClick={this.shiwenAudio.bind(this)}><i className="iconfont icon-shengyinyinliangxianxing"></i></li>
            <li><i className="iconfont icon-bianji"></i></li>
          </ul>
          <div className="shiwenerwima"></div>
          <div className="shiwenAudio">
            <audio src="https://song.gushiwen.org/song/jiangweiwei/ee16df5673bc.mp3" controls = "controls"></audio>
            <span className=
            "shiwenReaders">(朗诵者：将威威)</span>
          </div>
        </div>
        <div className="tag">
          <ul className="tag_list">
            <li>乐府，</li>
            <li>唐诗，</li>
            <li>咏物</li>
          </ul>
        </div>
      </div>
    )
  }
}

export default Com;
